<!DOCTYPE html>
<html lang="ch-ZN">

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>商品列表</title>
  <link rel="stylesheet" href="../../lib/css/reset.min.css">
  <link rel="stylesheet" href="../../lib/css/swiper.min.css">
  <link rel="stylesheet" href="../../lib/css/animate.min.css">
  <link rel="stylesheet" href="../../css/all.min.css">
  <script src="../../lib/js/flexible.js"></script>
  <script src="../../lib/js/fastclick.js"></script>
</head>

<body ontouchstart>
  <div id="productList" class="app-wrap" v-cloak>
    <div class="shop-i-fixed">
      <!-- 店铺信息 -->
      <div class="shop-i-head">
        <div class="top">
          <div class="top-left">
            <div class="icon-back-product"></div>
            <div class="search">
              <i></i>
              <input type="text" placeholder="9.9时尚秒杀日，限量抢">
            </div>
          </div>
        </div>
      </div>
      <!-- 筛选 -->
      <div class="shop-all-shaixuan">
        <div class="item active">
          <span>综合</span>
          <i class="down-arr-red"></i>
        </div>
        <div class="item">
          <span>销量</span>
        </div>
        <div class="item">
          <span>价格</span>
          <div class="arr-group">
            <i class="up-arr-gray"></i>
            <i class="down-arr-gray"></i>
          </div>
        </div>
        <div class="item">
          <span>店铺</span>
        </div>
        <div class="item" @click="callPopBoxInfo(1,popBoxInfo.productFilter.params)">
          筛选<i class="shaixuan"></i>
        </div>
      </div>
    </div>

    <!-- 产品列表 -->
    <div class="bg-gary pt-312">
      <div class="product-filter-list">
        <div v-for="(item,index) in pro_list" class="item" :key="index">
          <a href="./product.html">
            <div class="img-box">
              <img :src="item.picImg">
            </div>
            <div class="text-box">
              <p class="title">{{item.name}}</p>
              <p>
                <span class="tag">定制</span>
                <span class="tag_new">商场同款</span>
              </p>
              <p>
                <span class="sell-price">¥{{item.showPrice}}</span>
                <span class="ori-price">月销{{item.monthlySales}}笔</span>
              </p>
            </div>
          </a>
        </div>
      </div>

    </div>

    <!-- 弹出框 -->
    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
      <div class="lay-wrap" v-show="popBoxInfoFlag">
        <div class="layer" @click.stop="closeBoxInfo()"></div>
        <!-- pop box 展示更多信息 -->
        <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
          <!-- 商品列表筛选 -->
          <div v-show="popBoxInfoFlag" v-if="popBoxInfoType==1" class="popBox-filterSelParams bg-white scroll">
            <!-- 头部 -->
            <div class="hd bg-white">
              <h1 class="title">价格</h1>
              <div class="range-wrap">
                <span class="range-title">价格区间(元)</span>
                <div class="range">
                  <input class="input" type="text" pattern="[0-9]*" placeholder="最低价">
                  <span class="connector"></span>
                  <input class="input" type="text" pattern="[0-9]*" placeholder="最高价">
                </div>
              </div>
            </div>
            <!-- 内容部分 -->
            <div class="bd">

              <div class="zone-wrap p-27" :class="{expand:popBoxInfoBus.popBoxInfoToggle}">

                <div class="zone-tit">
                  <h1>品牌</h1>
                  <span class="arrow" @click="toggleItem"></span>
                </div>
                <ul class="mainList">
                  <li v-for="(item,index) in popBoxInfoBus" :key="index" :class="{cur:index==popBoxInfoParmasCur}" @click="selParams(index)">{{item.brand}}</li>
                </ul>
              </div>


              <div class="zone-wrap p-27">
                <div class="zone-tit">
                  <h1>类别</h1>
                  <span class="arrow"></span>
                </div>
                <div class="list">
                  <li v-for="(item,index) in popBoxInfoBus[popBoxInfoParmasType?popBoxInfoParmasType:0].sizeList" :key="index">
                    <input class="radioSel" type="radio" name="listSel1" :value="item.size">
                    <span class="label">{{item.size}}</span>
                  </li>
                </div>
              </div>
              <div class="zone-wrap p-27">
                <div class="zone-tit">
                  <h1>尺码</h1>
                  <span class="arrow"></span>
                </div>
                <div class="list">
                  <li v-for="(item,index) in popBoxInfoBus[popBoxInfoParmasType?popBoxInfoParmasType:0].sizeList" :key="index">
                    <input class="radioSel" type="radio" name="listSel2" :value="item.size">
                    <span class="label">{{item.size}}</span>
                  </li>
                </div>
              </div>
              <div class="zone-wrap p-27">
                <div class="zone-tit">
                  <h1>裙长</h1>
                  <span class="arrow"></span>
                </div>
                <div class="list">
                  <li v-for="(item,index) in popBoxInfoBus[popBoxInfoParmasType?popBoxInfoParmasType:0].sizeList" :key="index">
                    <input class="radioSel" type="radio" name="listSel3" :value="item.size">
                    <span class="label">{{item.size}}</span>
                  </li>
                </div>
              </div>
              <div class="zone-wrap p-27">
                <div class="zone-tit">
                  <h1>袖长</h1>
                  <span class="arrow"></span>
                </div>
                <div class="list">
                  <li v-for="(item,index) in popBoxInfoBus[popBoxInfoParmasType?popBoxInfoParmasType:0].sizeList" :key="index">
                    <input class="radioSel" type="radio" name="listSel3" :value="item.size">
                    <span class="label">{{item.size}}</span>
                  </li>
                </div>
              </div>
              <div class="zone-wrap p-27">
                <div class="zone-tit">
                  <h1>人群</h1>
                  <span class="arrow"></span>
                </div>
                <div class="list">
                  <li v-for="(item,index) in popBoxInfoBus[popBoxInfoParmasType?popBoxInfoParmasType:0].sizeList" :key="index">
                    <input class="radioSel" type="radio" name="listSel3" :value="item.size">
                    <span class="label">{{item.size}}</span>
                  </li>
                </div>
              </div>
              <div class="zone-wrap p-27">
                <div class="zone-tit">
                  <h1>上市时间</h1>
                  <span class="arrow"></span>
                </div>
                <div class="list">
                  <li v-for="(item,index) in popBoxInfoBus[popBoxInfoParmasType?popBoxInfoParmasType:0].sizeList" :key="index">
                    <input class="radioSel" type="radio" name="listSel3" :value="item.size">
                    <span class="label">{{item.size}}</span>
                  </li>
                </div>
              </div>
            </div>
            <!-- 底部按钮 -->
            <div class="ft bg-white">
              <div class="btn-wrap">
                <span class="bg-orange">重置</span>
                <span class="bg-red">确定</span>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </div>
  <script src="../../lib/js/fastclick.js"></script>
  <script src="../../lib/js/vue.js"></script>
  <script src="../../lib/js/axios.min.js"></script>
  <!-- mock 数据 打包发布的时候记得移除 -->
  <script src="../../lib/js/mock.js"></script>

  <script src="../../js/all.min.js"></script>
  <script>
    productList();
  </script>
</body>

</html>